import { View, Text , Image,ScrollView ,StyleSheet } from 'react-native'
import React from 'react'
import { Link, router } from 'expo-router'
import { StatusBar } from 'expo-status-bar'
import { SafeAreaView } from 'react-native-safe-area-context'
import { images } from '../constants'
import "../global.css";
import CustomButton from '../components/CustomButton'

const App = () => {
  return (
    <SafeAreaView className="bg-primary h-full">
      <ScrollView contentContainerStyle={{ height: '100%' }}>
        <View className="w-full items-center justify-center min-h-[85vh] px-4">
          <Image
            source={images.logo}
            style={styles.logo}
            resizeMode="contain"
          />
          <Image
            source={images.cards}
            style={styles.cards}
            resizeMode="contain"
          />
          <View className="relative mt-5">
            <Text className="text-3xl text-white font-bold text-center">
              Discover Endless Possibilities width{''}
              <Text className="text-[#F9A826]">Aora</Text>
            </Text>
            <Image source={images.path} 
            resizeMethod='contain'
            style={{ width: "130px", height: "15px" }} 
             className="absolute  -bottom-2 -right-8"
            />
          </View>

          <Text className="text-sm font-pregular text-gray-100 mt-7 text-center">Where creativety meets innovation: embark on a joourney of limitless exploration whit Aora</Text>
        
          <CustomButton
            title="Continue with Email"
            handlePress={() => router.push('/Sign-in')}
            containerStyle="w-full mt-7"
          />
        </View>
      </ScrollView>
      <StatusBar
      backgroundColor='#161622'
      style="light" />
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  logo: {
    width: 130,
    height: 84,
  },
  cards:{
    width: 300,
    height: 300,
  }
})

export default App